<template>
  <div>
    <Header/>
    <login-header></login-header>
    <div class="erweima">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h3>订单编号：{{ this.orderId }}</h3>
      <p>&nbsp;</p>
      <h3>订单金额:￥{{ this.totalPrice }}</h3>
      <hr/>

      <div class="orderIs" v-if="this.ifshow">
        <qrcode-vue :value="this.payUrl" :size="this.size" level="H" class="erweimaclass"/>
      </div>
      <div class="pay-success" v-if="this.ifShowSuc">订单支付成功!!!!</div>
    </div>
    <login-footer></login-footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import LoginHeader from "../components/LoginHeader";
import LoginFooter from "../components/LoginFooter";
import QrcodeVue from 'qrcode.vue';

export default {
  name: "payForOrder",
  components: {
    LoginHeader, Header, LoginFooter, QrcodeVue
  },
  data() {
    return {
      orderId: "",
      totalPrice: 0,
      payUrl: "",
      size: 200,
      ifshow: true,
      ifShowSuc: false,
      WebSocket: null,
      baseUrl:"ws://192.168.2.4:8888/"
    }
  },
  methods: {},
  mounted: function () {
    this.orderId = this.$route.query.orderId;
    this.totalPrice = this.$route.query.totalPrice;
    this.payUrl = this.$route.query.payUrl;
    setInterval(()=>{
      this.$axios({
        url:"api/OrderService/status",
        method:"get",
        params:{
          orderId:this.orderId
        }
      }).then((res)=>{
        if(res.data.data=="1")
        {
          // this.ifshow=false;
        }else if(res.data.data=="2")
        {
          this.ifshow=false;
          this.ifShowSuc=true;
          clearInterval()
        }
      })
    },3000)
  }
}
</script>

<style scoped>
.pay-success {
  font-size: 30px;
  margin-top: 180px;
  margin-left: 280px;
  color: #01c78a;
}

.erweimaclass {
  margin-left: 300px;
  margin-top: 120px;
}

.erweima {
  width: 800px;
  height: 600px;
  border: 1px solid #41b6a9;
  border-radius: 30px;
  background-color: rgba(246, 245, 245, 0.27);
}
</style>